<template>
    <div ref="scroller" class="pullup-bswrapper">
        <div class="pullup-scroller">
            <div v-if="requestState === 'loading'">
                正在请求数据
            </div>
            <div v-else-if="requestState === 'error'">
                请求数据失败
            </div>
            <div v-else-if="requestState === 'empty'">
                没有正在热映的数据
            </div>
            <ul v-else class="pullup-list">
                <li
                        v-for="movie of movieList"
                        :key="movie.id"
                        class="pullup-list-item"
                >
                    <movie-item v-bind:movie="movie"></movie-item>
                </li>
            </ul>
            <div class="pullup-wrapper">
                <div v-if="!isPullUpLoad" class="before-trigger">
                    <span class="pullup-txt">上拉加载更多</span>
                </div>
                <div v-else class="after-trigger">
                    <span class="pullup-txt">加载中……</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from "@better-scroll/core";
    import Pullup from "@better-scroll/pull-up";
    import  {getInitMovieList,getMoreMovieList} from "../../api/index"
    import  MovieItem from "./MovieItem"
    BScroll.use(Pullup)
    export default {
        data() {
            return {
                isPullUpLoad: false,
                movieList: null,
                movieIds: [],
                requestState: "loading",
                requestMoreState: "loading",
                start: -1
            };
        },
        components:{
            MovieItem
        },
        created() {
            // 创建Vue实例时
            this.bscroll = null;
        },
        async mounted() {
            // 实例渲染之后，初始化
            try {
                const data = await getInitMovieList();
                const { movieList, movieIds } = data;
                this.movieList = movieList;
                this.start = movieList.length;
                this.movieIds = movieIds;
                if (this.movieList.length === 0) {
                    this.requestState = "empty";
                } else {
                    this.requestState = "success";
                    // 改变响应式数据并没有立刻更新DOM
                    this.$nextTick(() => {
                        this.initBScroll();
                    });
                }
            } catch (e) {
                this.requestState = "error";
                console.error(e);
            }
        },
        methods: {
            initBScroll() {
                // 初始化BetterScroll
                this.bscroll = new BScroll(this.$refs["scroller"], {
                    scrollY: true, // 支持垂直方向滑动
                    pullUpLoad: true // 支持上拉加载
                });
                // 监听pullingUp
                this.bscroll.on("pullingUp", this.pullingUpHandler);
            },
            async pullingUpHandler() {
                this.isPullUpLoad = true;
                await this.requestData();
                // 成功请求的执行结果
                this.bscroll.finishPullUp();
                // refresh表示提醒bscroll内部DOM有修改。
                this.bscroll.refresh();
                this.isPullUpLoad = false;
            },
            async requestData() {
                // 用到了movieIds
                // 请求从第11条数据开始，一共请求11条
                this.requestMoreState = 'loading'
                if (this.start >= this.movieIds.length) {
                    // 所有电影都请求完毕
                    this.requestMoreState = 'complete'
                } else {
                    let end = this.start + 10;
                    const slicedMovieIds = this.movieIds.slice(this.start, end);
                    this.start = end;
                    try {
                        const data = await getMoreMovieList(slicedMovieIds);
                        const { coming } = data;
                        // 把新的请求结果追加到已有的movieList中
                        if(coming.length !== 0){
                            this.movieList = this.movieList.concat(coming);
                        }else{
                            // 请求参数问题
                        }
                        this.requestMoreState = 'success'
                    } catch (err) {
                        this.requestMoreState = 'error'
                        throw err
                    }
                }
            }
        }
    };
</script>

<style lang="stylus" scoped>
    .pullup-bswrapper
        height: 100%
        padding: 0 10px
        border: 1px solid #ccc
        overflow: hidden
    .pullup-list
        padding: 0
    .pullup-list-item
        padding: 10px 0
        list-style: none
        border-bottom: 1px solid #ccc
    .pullup-wrapper
        padding: 20px
        text-align: center
        color: #999
</style>